<template>
  <!-- 故障说明 -->
  <div style="position: relative">
    <el-card style="height:calc( 100vh - 85px); overflow: auto">
      <!-- 信息搜索框 -->
      <el-form v-model="queryObj" label-width="100px" size="large">
        <el-row>
          <el-col :span="7" style="margin-right: 15px">
            <el-form-item label="errorType：">
              <el-input v-model.trim="queryObj.errorType" placeholder="请输入errorType" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="7" style="margin-right: 15px">
            <el-form-item label="level：">
              <el-input v-model="queryObj.level" placeholder="请输入level" />
              <el-input-number v-model="queryObj.level"  label="请输入level"></el-input-number>
            </el-form-item>
          </el-col> -->
          <el-col :span="7" style="margin-right: 15px">
            <el-form-item label="module：">
              <el-input v-model.trim="queryObj.module" placeholder="请输入module" />
            </el-form-item>
          </el-col>
          <el-col :span="7" style="margin-right: 15px">
            <el-form-item label="alarmName：">
              <el-input v-model.trim="queryObj.alarmName" placeholder="请输入alarmName" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right: 15px">
            <el-form-item label="summary：">
              <el-input v-model.trim="queryObj.summary" placeholder="请输入summary" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right: 15px">
            <el-form-item label="suggestion：">
              <el-input v-model.trim="queryObj.suggestion" placeholder="请输入suggestion" />
            </el-form-item>
          </el-col>
          <searchbutton :isopen="isopen" @isopenclickfn="isopenclick" @resetQueryfn="resetQuery" @queryClickfn="queryClick" />
        </el-row>
      </el-form>
      <!-- 调整状态按钮 -->
      <el-row style="margin-bottom: 10px">
        <div style="float: left">
          <el-button type="primary" plain @click="AddDataDialog = true"><i class="el-icon-plus" /> 创建故障信息</el-button>
        </div>
        <div style="float: right">
          <div style="font-size: 30px; display: inline-block; margin-right: 5px">
            <a href="#">
              <el-tooltip class="item" effect="dark" content="列位置" placement="top" style="cursor: pointer">
                <el-dropdown trigger="click" :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <i class="el-icon-s-grid el-icon--right" style="font-size: 24px; color: black" />
                  </span>
                  <el-dropdown-menu slot="dropdown" style="width: 190px; height: 300px; overflow: auto">
                    <el-dropdown-item><el-checkbox v-model="deleteCell.iserrorType">errorType</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.ismodule">module</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.iscode">code</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.islevel">level</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isalarmName">alarmName</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.issummary">summary</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.issuggestion">suggestion</el-checkbox></el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-tooltip>
            </a>
          </div>
          <!-- 右侧公用按钮功能组件 -->
          <functionButton style="float:right" :refresh-click="refreshClick" :table-data="tableData" :table-data-all="tableDataAll" :headers-arr="headersArr" :headers-relations="headersRelations"
            @exportAllfn="exportAll" />
        </div>
      </el-row>

      <!-- 任务总表   v-if="queryObj.userName !== ''"-->
      <el-table v-loading="listLoading" :data="tableData" border :row-style="{ height: '40px' }" :cell-style="{ padding: '0px' }" style="width: 100%; margin-bottom: 10px; overflow: auto">
        <el-table-column fixed="left" width="80" align="center">
          <template slot-scope="scopedata">
            <el-button type="text" size="small" @click.native="handleUpdate(scopedata.row)"><i class="el-icon-edit" style="font-size:16px" /></el-button>
            <el-button type="text" size="small" @click.native="handledelete(scopedata.row)"><i class="el-icon-delete" style="color:red;font-size:16px" /></el-button>
          </template>
        </el-table-column>
        <el-table-column v-if="deleteCell.iserrorType" prop="errorType" label="errorType" />
        <el-table-column v-if="deleteCell.ismodule" prop="module" label="module" />
        <el-table-column v-if="deleteCell.iscode" prop="code" label="code" />
        <el-table-column v-if="deleteCell.islevel" prop="level" label="level" />
        <el-table-column v-if="deleteCell.isalarmName" prop="alarmName" label="alarmName" />
        <el-table-column v-if="deleteCell.issummary" prop="summary" label="summary" />
        <el-table-column v-if="deleteCell.issuggestion" prop="suggestion" label="suggestion" />
      </el-table>
      <!-- 分页组件 -->
      <paging :pagion-obj="pagionObj" :handle-size-change="handleSizeChange" :handle-page-change="handlePageChange" />
    </el-card>
    <!-- 新建数据 -->
    <el-dialog title="新建数据" :visible.sync="AddDataDialog" width="30%" top="5vh">
      <el-form v-model="addQueryObj" label-width="120px" size="large">
        <el-row>
          <el-col style="margin-right: 15px">
            <el-form-item label="errorType：">
              <el-input v-model.trim="addQueryObj.errorType" placeholder="请输入errorType" />
            </el-form-item>
          </el-col>
          <el-col style="margin-right: 15px">
            <el-form-item label="module：">
              <el-input v-model.trim="addQueryObj.module" placeholder="请输入module" />
            </el-form-item>
          </el-col>
          <el-col style="margin-right: 15px">
            <el-form-item label="code：">
              <el-input v-model.trim="addQueryObj.code" placeholder="请输入code" />
            </el-form-item>
          </el-col>
          <el-col style="margin-right: 15px">
            <el-form-item label="level：">
              <el-input v-model.number.trim="addQueryObj.level" placeholder="请输入level" />
            </el-form-item>
          </el-col>
          <el-col style="margin-right: 15px">
            <el-form-item label="alarmName：">
              <el-input v-model.number="addQueryObj.alarmName" placeholder="请输入alarmName" />
            </el-form-item>
          </el-col>
          <el-col style="margin-right: 15px">
            <el-form-item label="summary：">
              <el-input v-model.trim="addQueryObj.summary" placeholder="请输入summary" />
            </el-form-item>
          </el-col>
          <el-col style="margin-right: 15px">
            <el-form-item label="suggestion：">
              <el-input v-model.trim="addQueryObj.suggestion" placeholder="请输入suggestion" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="AddDataDialog = false">取 消</el-button>
        <el-button type="primary" @click="addConfirmEdit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑数据 -->
    <el-dialog title="编辑数据" :visible.sync="editDataDialog" width="30%" top="5vh">
      <p v-for="(item, key) in nowClickData" :key="key">
        <span style="display:inline-block;width: 30%;">{{ key }}</span>
        <el-input v-model="nowClickData[key]" :placeholder="item" style="width:70%" />
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDataDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  QueryAlarmApi,
  UpdateAlarmApi,
  CreateAlarmApi,
  DeleteAlarmApi,
} from "@/api/config.js";
import { Message } from "element-ui";
export default {
  name: "ErrorExplanation",
  data() {
    return {
      queryObj: {
        page: 0, // 第几页
        size: 0, // 每页条数
        errorType: "",
        module: "",
        code:'',
        level: 0,
        alarmName: "",
        summary: "",
        suggestion: "",
      },
      addQueryObj: {
        id: 0,
        errorType: "",
        module: "",
        code:'',
        level: 0,
        alarmName: "",
        summary: "",
        suggestion: "",
      },
      // 分页的数据
      pagionObj: {
        size: 10,
        currentPage: 1,
        total: 100,
      },
      // 请求返回的数据
      tableData: [],
      tableDataAll: [],
      // 时间的数据
      timestart_end: [],
      isopen: false,
      // 页面loding效果
      listLoading: true,
      // 列位置 数据
      deleteCell: {
        iserrorType: true,
        ismodule: true,
        iscode: true,
        islevel: true,
        isalarmName: true,
        issummary: true,
        issuggestion: true,
      },
      // excel 数据的key 表头数据
      headersArr: [
        "errorType",
        "module",
        "code",
        "level",
        "alarmName",
        "summary",
        "suggestion",
      ], // '故障时间', '恢复时间'
      // 将表头转换成中文
      headersRelations: {
        errorType: "errorType",
        module: "module",
        code: "code",
        level: "level",
        alarmName: "alarmName",
        summary: "summary",
        suggestion: "suggestion",
        // 故障时间: 'setTime',
        // 恢复时间: 'createdTime'
      },
      // 编辑数据的dialog
      editDataDialog: false,
      // 新建数据
      AddDataDialog: false,
      // 当前点击的数据
      nowClickData: {},
    };
  },
  // 监视时间变化
  // watch: {
  //   timestart_end(newData) {
  //     if (newData !== null && newData.length > 0) {
  //       this.queryObj.startTime = this.timestart_end[0];
  //       this.queryObj.endTime = this.timestart_end[1];
  //     } else {
  //       this.queryObj.startTime = "0001/1/1 0:00:00";
  //       this.queryObj.endTime = "0001/1/1 0:00:00";
  //     }
  //   },
  // },
  mounted() {
    this.queryData();
  },
  methods: {
    /** 获取页面数据*/
    async queryData() {
      this.listLoading = true;
      this.queryObj.size = this.pagionObj.size;
      this.queryObj.page = this.pagionObj.currentPage;
      console.log(this.queryObj, "this.queryObj");
      const res = await QueryAlarmApi(this.queryObj);
      this.tableData = res.data.data;
      this.pagionObj.pageCount = res.data.pageCount;
      this.pagionObj.total = res.data.count;
      this.listLoading = false;
    },
    // 搜索按钮
    queryClick() {
      this.pagionObj.currentPage = 1;
      this.queryData();
    },
    // 刷新按钮
    refreshClick() {
      this.listLoading = true;
      this.queryData();
      this.listLoading = false;
    },
    /** 每页显示数据变化*/
    handleSizeChange(val) {
      this.pagionObj.size = val;
      this.queryData();
    },
    /** 当前页变化*/
    handlePageChange(val) {
      this.pagionObj.currentPage = val;
      this.queryData();
    },
    // 时间选择器处理
    // handleDataChanged() {
    //   if (this.timestart_end !== null) {
    //     this.queryObj.startTime = this.timestart_end[0];
    //     this.queryObj.endTime = this.timestart_end[1];
    //   } else {
    //     this.queryObj.startTime = "0001/1/1 0:00:00";
    //     this.queryObj.endTime = "0001/1/1 0:00:00";
    //   }
    // },
    // 展开收起
    isopenclick() {
      this.isopen = !this.isopen;
    },
    // 重置按钮
    resetQuery() {
      this.queryObj.configKey = "";
      this.queryObj.configValue = "";
      this.queryObj.desc = "";
      this.timestart_end = [];
    },
    // 删除
    handledelete(data) {
      console.log(data);
      this.$confirm("确认删除该任务吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await DeleteAlarmApi({ id: data.id });
        this.queryData();
        Message.success("删除成功");
      });
    },
    // 修改
    handleUpdate(data) {
      this.nowClickData = data;
      console.log(data, this.nowClickData, "nowClickData");
      this.editDataDialog = true;
    },
    // 确认修改
    async confirmEdit() {
      const res = await UpdateAlarmApi(this.nowClickData);
      console.log(res);
      // Message.success("修改成功");
      this.queryData();
    },
    // 确认新建
    async addConfirmEdit() {
      console.log(this.addQueryObj, "addQueryObj");
      const res = await CreateAlarmApi(this.addQueryObj);
      console.log(res);
      Message.success("新建成功");
      this.AddDataDialog = false;
      this.queryData();
      this.addQueryObj = {
        id: 0,
        errorType: "",
        module: "",
        level: 0,
        alarmName: "",
        summary: "",
        suggestion: "",
      };
    },
    // excel导出全部
    async exportAll() {
      const res2 = await QueryAlarmApi({ size: 10000 });
      this.tableDataAll = res2.data.data;
    },
  },
};
</script>

<style scoped>
.editinput {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 0px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
</style>

